<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>unorder list image and text</title>
<style>
ul{list-style:none;margin:0px;padding:0px;width:500px;}
ul li{margin:0x;border-bottom:1px dotted black;}
ul li img{float:left;}

#change  li{padding-left:130px;}
#change li img{position:relative;left:-130px;margin-right:-120px;}
</style>
</head>

<body>
<!--REF:http://five.gregorywood.co.uk/index.php?/blog/article/a-nice-little-css-positioning-technique-->
<ul>
	<li><img src="../../images/p3.gif" />
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
	</li>
	<li><img src="../../images/p3.gif" />
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
	</li>
	<li><img src="../../images/p3.gif" />
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
	</li>
</ul>

<div style="margin:20px 0px;font-weight:bold;">different after css change:</div>

<ul id="change">
	<li><img src="../../images/p3.gif" />
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
	</li>
	<li><img src="../../images/p3.gif" />
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
	</li>
	<li><img src="../../images/p3.gif" />
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
		unorder list image and textunorder list image and textunorder list image and textunorder list image and text
	</li>
</ul>
</body>
</html>
